<script setup lang="ts">
import {ref} from "vue"
import {useCounterStore} from "@/stores/counter"
const count = ref(0);
const store = useCounterStore();
const increment = ()=>{
  count.value+=1;
}
const decrement = ()=>{
  count.value-=1;
}
</script>

<template>
  <h2>Home Page</h2>
  <div>
    {{count}}
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
  <div>
    {{useCounterStore().count}}
    <button @click="useCounterStore().increment">+</button>
    <button @click="useCounterStore().decrement">-</button>
  </div>
  <div>
    {{store.count}}
    <button @click="store.increment">+</button>
    <button @click="store.decrement">-</button>
  </div>
</template>
